<template>
    <div>
        <nav-bar>
            <template v-slot:default>个人中心</template>
        </nav-bar>
        <div class="One">
            <div class="One_1">
                <div class="O1">
                    <img src="http://img.wxcha.com/m00/4a/6f/1b261343a878f9d4792923457154ee14.jpg" alt="">
                </div>
                <div class="O2">
                    <p class="O22">昵称：{{user.name}}</p>
                    <p>登录名：{{user.email}}</p>
                    <p>个性签名：快乐每一天</p>
                </div>
            </div>
            <div class="One_2">
                <ul>
                    <li @click="goTo('/collect')">
                        <span>我的收藏</span>
                        <van-icon name="arrow" class="ye"/>
                    </li>
                    <li @click="goTo('/order')">
                        <span>我的订单</span>
                        <van-icon name="arrow" class="ye"/>
                    </li>
                    <li @click="goTo('/setting')">
                        <span>账号管理</span>
                        <van-icon name="arrow" class="ye" />
                    </li>
                    <li @click="goTo('/address')">
                        <span>地址管理</span>
                        <van-icon name="arrow" class="ye"/>
                    </li>
                    <li @click="goTo('/about')">
                        <span>关于我们</span>
                        <van-icon name="arrow" class="ye"/>
                    </li>
            </ul>
            </div>
        </div>
        <div class="Two">
            <van-button @click="tologout" round block color="#44BA80">退出按钮</van-button>
        </div>
    </div>
</template>
<script>
import NavBar from 'components/common/navbar/NavBar'
import {ref,reactive,toRefs,onMounted} from 'vue'
import {logout,getUser} from 'network/user'
import {Toast} from 'vant'
import {useRouter} from 'vue-router';
import {useStore} from 'vuex'
export default {
    name:'Profile',
    components:{
        NavBar
    },
    setup(){
        const router = useRouter();
        const store = useStore();
        const tologout = () =>{
            logout().then(res=>{
                if(res.status == '204'){
                    Toast.success('退出成功！');
                    // 清除token  window
                    window.localStorage.setItem('token','');

                    store.commit('setIsLogin',false);
                    
                    setTimeout(()=>{
                        router.push({path:'/login'});
                    },500)
                }
            })
        }
        const state = reactive({
            user:{}
        })
        // 跳转方法
        const goTo = (path,query) => {
            router.push({path,query:query || {}})
        }
        onMounted(()=>{
            getUser().then(res=>{
                state.user = res;
            })
        })
        return{
            tologout,
            ...toRefs(state),
            goTo
        }
    }
}
</script>
<style scoped lang="scss">
    .One{
        margin-top: 70px;
        .One_1{
            width: 90%;
            height: 100px;
            background: aqua;
            margin: 0 auto;
            border-radius: 10px;
            display: flex;
            .O1{
                flex: 1;
                img{
                    width: 70px;
                    height: 70px;
                    margin-top: 15px;
                }
            }
            .O2{
                flex: 2;
                p{
                    font-size: 18px;
                    text-align: left;
                    margin-top: 5px;
                }
                .O22{
                    margin-top: 15px;
                }
            }
        }
        .One_2{
            width: 100%;
            height: 300px;
            margin-top: 20px;
            li{
                width: 100%;
                height: 60px;
                border-bottom: 1px solid gray;
                line-height: 60px;
                span{
                    float: left;
                    padding-left: 10px;
                }
                .ye{
                    float: right;
                    line-height: 60px;
                    padding-right: 10px;
                }
            }
        }
    }
    .Two{
        margin-top: 30px;
    }
</style>
